.foxui-table {
    width: 100%;
    // overflow: hidden;
    max-width: 100%;
    background-color: $--color-white;
    color: $--color-text-regular;

    .foxui-table-thead {
        .foxui-table-tr {
            display: flex;

            .foxui-table-th {
                flex: 1;
                font-weight: bold;
                padding: $--padding-base $--padding-small;
            }
        }
    }

    .foxui-table-tbody {
        .foxui-table-tr {
            display: flex;

            .foxui-table-td {
                flex: 1;
                display: flex;
                align-items: center;
                padding: $--padding-base $--padding-small;
            }
        }
    }

    .foxui-table-tfoot {
        display: flex;

        li {
            padding: $--padding-base $--padding-small;
        }
    }

    &.foxui-table-stripe {
        .foxui-table-tbody {
            .foxui-table-tr {
                &:nth-child(even) {
                    background-color: $--table-stripe-background-color;
                }
            }
        }
    }

    &.foxui-table-border {
        border: $--border-base;

        .foxui-table-thead {
            .foxui-table-tr {
                border-bottom: $--border-base;

                .foxui-table-th {
                    &:not(:last-child) {
                        border-right: $--border-base;
                    }
                }
            }
        }

        .foxui-table-tbody {
            .foxui-table-tr {
                &:not(:last-child) {
                    border-bottom: $--border-base;
                }

                .foxui-table-td {
                    &:not(:last-child) {
                        border-right: $--border-base;
                    }
                }
            }
        }

        .foxui-table-tfoot {
            border-top: $--border-base;
        }
    }

    &.foxui-table-border-bottom {
        .foxui-table-tr {
            border-bottom: $--border-base;
        }

        .foxui-table-tfoot {
            border-top: $--border-base;
        }
    }

    &.foxui-table-hover {
        .foxui-table-tbody {
            .foxui-table-tr {
                transition: $--background-color-transition-base;

                &:hover {
                    background-color: $--table-hover-background-color;
                }
            }
        }
    }
}
